<template>
  <div class="app-container">
    <div class="customContainer">
      <!-- 搜索头 -->
      <el-form :inline="true" class="demo-form-inline" size="small">
        <el-form-item>
          <el-select placeholder="选择门店" v-model="saveForm.store_id" filterable @change="storeChange">
            <el-option v-for="item in storeList" :key="item.id" :label="item.name" :value="item.id">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-select placeholder="选择仓" v-model="saveForm.house_id" @change="houseChange">
            <el-option v-for="item in houseList" :key="item.house_id" :label="item.house_name" :value="item.house_id"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-select placeholder="选择类型" v-model="saveForm.purpose" class="w160">
            <el-option v-for="item in purpose_list" :key="item.id" :label="item.name" :value="item.id">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item class="pull-right">
          <el-button type="primary" @click="showGiftDialog">添加礼品</el-button>
        </el-form-item>
      </el-form>
      <!-- 列表 -->
      <el-table highlight-current-row :data="list" v-loading.body="listLoading" border fit size="small">
        <el-table-column align="center" label="礼品图片" width="80">
          <template slot-scope="scope">
            <img :src="scope.row.thumb" width="60" height="60" alt="">
          </template>
        </el-table-column>
        <el-table-column align="center" label="新礼品编号" prop="gift_id" sortable></el-table-column>
        <el-table-column align="center" label="神采礼品编号" prop="no_obsolete" sortable></el-table-column>
        <el-table-column align="center" label='礼品名称' prop="gift_name"></el-table-column>
        <el-table-column align="center" label="箱规" prop="box_num"></el-table-column>
        <el-table-column align="center" label='尺寸' prop="size"></el-table-column>
        <el-table-column align="center" label='分类' prop="type_name"></el-table-column>

        <el-table-column align="center" label='出库数' prop="num" sortable>
          <template slot-scope="scope">
            <el-input type="number" onmousewheel="return false;" v-model="scope.row.num" placeholder="数量">
            </el-input>
          </template>
        </el-table-column>
        <el-table-column align="center" label='礼品成本价（元）'>
          <template slot-scope="scope">
            <!-- 保留小数 -->
            {{scope.row.money_cost/1000000|keepTwoNum}}
          </template>
        </el-table-column>
        <el-table-column align="center" label='礼品成本总价（元）'>
          <template slot-scope="scope">
            {{scope.row.num*scope.row.money_cost/1000000|keepTwoNum}}
          </template>
        </el-table-column>
        <el-table-column align="center" label="操作" width="80">
          <template slot-scope="scope">
            <el-button type="danger" icon="el-icon-delete" size="mini" @click="delClick(scope.$index)">
            </el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <el-dialog :close-on-click-modal="false" title="礼品详情" :visible.sync="infoDialog" width="600px">
      <el-table highlight-current-row :data="giftInfo">

        <el-table-column align="center" prop="type_name" label="三级分类"></el-table-column>
        <el-table-column align="center" prop="serie_name" label="系列"></el-table-column>
        <el-table-column align="center" prop="texture" label="材质"></el-table-column>
      </el-table>
    </el-dialog>

    <!-- 搜索礼品弹框 -->
    <el-dialog :close-on-click-modal="false" class="dialog_table" width="80%" style="margin-top: -60px;" title="选择礼品" :visible.sync="addGiftDialog"
      append-to-body :key="saveForm.house_id">
      <el-form :inline="true" :model="searchGiftForm" class="demo-form-inline" size="small">
        <el-form-item>
          <el-select v-model="searchGiftForm.conditions" style="width:140px;">
            <el-option label="搜礼品名称" value="3"></el-option>
            <el-option label="搜新礼品编号" value="1"></el-option>
            <el-option label="搜神采礼品编号" value="2"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-input v-model="searchGiftForm.gift_id" placeholder="请输入礼品编号/名称" @keyup.enter.native="searchGiftClick" clearable></el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="searchGiftClick">查询</el-button>
        </el-form-item>
        <el-form-item class="pull-right">
          <el-tooltip class="item" effect="dark" placement="bottom-end">
            <div slot="content" style="line-height:20px">
              参数按英文的逗号隔开时可以批量查询，但是只支持精确匹配,最大支持100个，
              <br>参考参数：1,22,3或0201080156,0201090112,0201080111
            </div>
            <i class="el-icon-question" style="font-size:24px"></i>
          </el-tooltip>
        </el-form-item>
      </el-form>
      <el-table highlight-current-row :data="giftList" v-loading.body="listLoading" border size="small" @selection-change="handleSelectionChange">
        <el-table-column type="selection" width="36"></el-table-column>
        <el-table-column align="center" label="图片">
          <template slot-scope="scope">
            <img :src="scope.row.thumb" width="40" height="40" alt="">
          </template>
        </el-table-column>
        <el-table-column align="center" label="名称" prop="gift_name"></el-table-column>
        <el-table-column align="center" label="新礼品编号" prop="gift_id"></el-table-column>
        <el-table-column align="center" label="神采礼品编号" prop="no_obsolete"></el-table-column>
        <el-table-column align="center" label="箱规" prop="box_num"></el-table-column>
        <el-table-column align="center" label="尺寸" prop="size"></el-table-column>
      </el-table>
      <div slot="footer" class="dialog-footer" style="overflow:hidden">
        <div class="pull-right">
          <span>查询结果{{giftList.length}}个，已选中{{checkGiftList.length}}个</span>
          <el-button :disabled="checkGiftList.length==0" type="primary" @click="saveAddClick()" size="small">
            确认添加 </el-button>
        </div>
      </div>

    </el-dialog>
    <!-- 自定义底部 -->
    <div class="bottom_box">
      <el-input class="pull-left w200" size="small" v-model="saveForm.remark" placeholder="备注信息"></el-input>
      <el-button :disabled="list.length==0" class="pull-right" type="primary" size="small" @click="saveClick">确认出库
      </el-button>
    </div>
  </div>
</template>

<script>
import { getGiftList, getStoreList, houseList, save } from '@/api/storage_control/sundryOutput';
import { trim } from '@/utils';
export default {
  data() {
    return {
      machineInfo: '',
      list: [],
      listLoading: false,
      addGiftDialog: false,
      houseList: [],
      all_purpose_list: [
        { id: 1, name: '破损报废' },
        { id: 3, name: '办公领用' },
        { id: 4, name: '公关领用' },
        { id: 6, name: '总部领用' },
        { id: 7, name: '辅助用品出仓' },
        { id: 8, name: '退合作商' },
        { id: 9, name: '退供应商/总部' },
        { id: 10, name: '氛围活动' },
        { id: 11, name: '销售活动' }
      ],
      purpose_list: [],
      storeList: null,
      giftList: [], //搜索出来的礼品列表
      checkGiftList: [], //选中的礼品列表
      searchGiftForm: {
        //搜索条件
        conditions: '3',
        gift_id: ''
      },
      saveForm: {
        purpose: '',
        store_id: '',
        house_id: '',
        remark: '',
        gift: []
      },
      giftInfo: [],
      infoDialog: false
    };
  },
  beforeRouteEnter(to, from, next) {
    next(vm => {
      //当进入组件之前，执行 beforRouteEnter 路由钩子函数 ,//参数vm就是当前组件的实例。
      if (!vm.storeList) {
        vm.getstore();
      }
    });
  },
  methods: {
    houseChange() {
      let checkPurpose = this.houseList.find(item => {
        return item.house_id == this.saveForm.house_id;
      });
      if (checkPurpose.is_store_main == 1) {
        this.purpose_list = this.all_purpose_list.filter((item, i) => {
          return item.id < 10;
        });
      } else {
        this.purpose_list = this.all_purpose_list.filter((item, i) => {
          return item.id > 9;
        });
      }
      this.saveForm.purpose = this.purpose_list[0].id;
    },
    // ---------搜索礼品弹框--------
    // 添加礼品
    saveAddClick() {
      let ok = true;
      for (let i = 0; i < this.checkGiftList.length; i++) {
        for (let j = 0; j < this.list.length; j++) {
          if (this.checkGiftList[i].id == this.list[j].id) {
            this.$message({ type: 'error', message: '有礼品已存在列表' });
            ok = false;
            break;
          }
        }
      }
      if (ok) {
        this.$message({ type: 'success', message: '添加成功' });
        for (let i = 0; i < this.checkGiftList.length; i++) {
          this.list.push(this.checkGiftList[i]);
        }
        this.addGiftDialog = false;
      }
    },
    // 搜索礼品
    searchGiftClick() {
      if (!this.saveForm.house_id) {
        this.$message({ type: 'error', message: '请选择出库仓' });
        return;
      }
      if (!this.searchGiftForm.gift_id) {
        this.$message({ type: 'error', message: '请输入筛选条件' });
        return;
      }
      let gift_id = this.searchGiftForm.gift_id;
      let reg = /，/g;
      this.searchGiftForm.house_id = this.saveForm.house_id;
      gift_id = gift_id.replace(reg, ',');
      if (gift_id.charAt(gift_id.length - 1) == ',') {
        gift_id = gift_id.substr(0, gift_id.length - 1);
      }
      if (gift_id.split(',').length - 1 > 99) {
        this.$message({ type: 'error', message: '一次性最多查询100个' });
        return;
      }

      this.searchGiftForm.gift_id = trim(gift_id);

      getGiftList(this.searchGiftForm).then(response => {
        response.forEach(val => {
          val.id *= 1;
          val.num *= 1;
        });
        this.giftList = response;
      });
    },
    // 多选礼品
    handleSelectionChange(val) {
      this.checkGiftList = val;
    },
    // 添加礼品弹框
    showGiftDialog() {
      this.addGiftDialog = true;
    },
    // -----------------

    info(index) {
      this.giftInfo = [];
      this.infoDialog = true;
      this.giftInfo[0] = this.list[index];
    },
    saveClick() {
      this.saveForm.gift = [];
      let ok = true;
      if (!this.saveForm.house_id) {
        this.$message({ type: 'error', message: '请选择出库仓' });
        return;
      }
      for (let i = 0; i < this.list.length; i++) {
        if (this.list[i].num * 1 < 1 || !/^\d+$/.test(this.list[i].num)) {
          ok = false;
          this.$message({ type: 'error', message: '请全部输入正确的出库数，出库数只能为整数' });
          break;
        }
      }
      if (ok) {
        for (let i = 0; i < this.list.length; i++) {
          this.saveForm.gift.push({
            gift_id: this.list[i].id,
            num: this.list[i].num,
            look_money: this.list[i].money_cost
          });
        }
        save(this.saveForm).then(response => {
          this.$message({ type: response.code == 1 ? 'success' : 'error', message: response.message });
          if (response.code == 1) {
            this.list = [];
          }
        });
      }
    },
    delClick(index) {
      this.list.splice(index, 1);
    },
    storeChange() {
      this.list = [];
      this.giftList = [];
      this.getHouse();
    },
    getstore() {
      getStoreList({ category_id: 271 }).then(response => {
        this.storeList = response;
        // console.log(response)
        let data = response.filter(res => res.id == this.$store.getters.optionId);
        //  console.log(data)
        if (data.length > 0) {
          this.saveForm.store_id = data[0].id;
        } else {
          if (this.storeList.length > 0) {
            this.saveForm.store_id = this.storeList[0].id;
          }
        }
        this.getHouse();
      });
    },
    getHouse() {
      houseList({ store_id: this.saveForm.store_id, cang: 4 }).then(response => {
        this.houseList = response;
        if (response.length > 0) {
          this.saveForm.house_id = response[0].house_id;
        }

        this.houseChange();
      });
    }
  }
};
</script>